{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}
    {{ test.title }}
{% endblock %}

{% block header_extends %}
    <link rel="stylesheet" href="{% static 'test_list.css' %} ">
    <link rel="stylesheet" href="{% static 'test_detail.css' %} ">
    <!-- <link rel="stylesheet" href="/blog/static/blog_list.css"> -->
{#    <link rel="stylesheet" href="../static/blog_list.css">#}
{% endblock %}

{% block show_list %}
    <li class="{% block nav_test_active %} {% endblock %}">
        <a href="{% url 'test_list' %}">存储管理方式列表</a>
    </li>

{% endblock %}

{% block content %}
    <div class="container" >
        <div class="row " >
            <div class="col-xs-11 deco">
                <h3> {{ test.title }} </h3>
                <ul class="test-info-description">
                    <li>
                        <span class="glyphicon glyphicon-tags" >
                                {{ test.test_type }}
                        </span>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-time" >
                            {{ test.created_time|date:"Y-m-d" }}
                        </span>
                    </li>
                </ul>

                    <div class="row">
                        <div class="col-md-4 in_grid">
                            <form class="form-inline" action="{% url 'test_detail' test.id%}" method="post"
                                  onSubmit="return checkform();">
                                {% csrf_token %}
                               <input type="hidden" name="test_type" value={{ test.test_type.type_name }}>
                                <div class="form-group need_space">
                                    <label for="block_num">物理块数目&nbsp;&nbsp;&nbsp;：3</label>

{#                                    <input type="number" class="form-control" id="block_num" value="3" name="block_num" min="2" max="6" >&nbsp;#}
                                    <input type="hidden" class="form-control" id="block_num" value="3" name="block_num">&nbsp;
{#                                    <div style="color: #9d9d9d; display: inline-block">(2~6)</div>#}
                                </div>
                                <div class="form-group">
                                    <label for="page_queen_len">页面队列长度</label>
                                    <input type="number" class="form-control" id="page_queen_len" name="page_queen_len" min="5" max="1000">
                                    <div style="color: #9d9d9d; display: inline-block">(5~1000)</div>
                                </div>
                                <div class="form-group">
                                    <label for = "page_cf_num">进程页长</label>
                                    <input type="number" class="form-control" id="page_cf_num" name="page_cf_num" min="3" max="50" >
                                    <div style="color: #9d9d9d; display: inline-block">(3~50)</div>
                                </div>
                                <button type="submit" class="btn btn-primary but" >点击运行</button>
                            </form>
                            <div class="show_queue_list">
                                {% if test.show_res_bool == 1  %}
                                    <label >页面队列</label> &nbsp;
                                    {% for i in random_a %}
                                        {{ i }}
                                    {% endfor %}
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-7 in_grid">
                            {% if test.show_res_bool == 0 %}
                            {% elif test.show_res_bool == 1  %}
                                <p class="show"> 输入的物理块数：
                                    <span class="label label-info">{{ test.physical_block }}</span>,
                                    页面队列的长度是：
                                    <span class="label label-info">{{ test.page_queen_len }}</span>,
                                    进程页长是：
                                    <span class="label label-info">{{ test.page_cf_num }}</span>,
                                    得到的缺页率是：
                                    </p>
                                {% if test.test_type.type_name == "Compare_Algorithm" %}
                                    <p>使用FIFO方法得到的缺页率为:</p>
                                    <h3>{{ page_fault_ratef }}</h3>
                                    <p>使用LRU方法得到的缺页率为:</p>
                                    <h3>{{ page_fault_ratel }}</h3>
                                    <p>使用OPT方法得到的缺页率为:</p>
                                    <h3>{{ page_fault_rateo }}</h3>
                                {% else %}

                                    <h3 style="color: #FF660F;margin-left: 25px;">{{ page_fault_rate }}</h3>
                                    <div class="row border—do">
                                        <div class="col-md-5">
                                            <button class=" btn-show" id="runit" onclick="ff()"> 物理块变化</button>
                                        </div>
                                        <div class="col-md-7">
                                            <div class="block_back" >

                                            物理块1 &nbsp;<div class="block_blink" id="block1" style="text-align: center;">
                                            &nbsp;&nbsp;&nbsp;</div>
                                            物理块2 &nbsp;<div class="block_blink" id="block2" style="text-align: center;">
                                            &nbsp;&nbsp;&nbsp;</div>
                                            物理块3 &nbsp;<div class="block_blink" id="block3" style="text-align: center;">
                                            &nbsp;&nbsp;&nbsp;</div>

                                            </div>
                                        </div>

                                    </div>


                                {% endif %}
                            {% endif %}
                        </div>
 				    </div>
                <br>
            </div>
            <div class="col-xs-2 col-sm-2 col-md-2">

            </div>
        </div>
    </div>




{% endblock %}
{% block js_do %}
<script type="text/javascript">    
    function checkform(){ 
        if(document.getElementById('block_num').value.length==0){    
            alert('输入为空！');
            
            return false;
        }
        if(document.getElementById('page_queen_len' ).value.length==0){    
            alert('输入为空！');
            
            return false;
        }
        if(document.getElementById('page_cf_num' ).value.length==0){    
            alert('输入为空！');
        
            return false;
        }
    }

    var i = 0;
    var j = 0;
    var in_list = {{ in_list }};
    var judge_lack = {{ if_lack }};
    var array_int = {{ block_list }};
    console.log(array_int.length);
    function f(){
        if(judge_lack[i] === 0){
            // 不缺页，显示红色
            if(array_int[i] === 0)
            {
                $('#block1').css('backgroundColor', 'green');
                $('#block2').css('backgroundColor', 'grey');
                $('#block3').css('backgroundColor', 'grey');
            }
            else if(array_int[i] === 1){
                $('#block1').css('backgroundColor', 'grey');
                $('#block2').css('backgroundColor', 'green');
                $('#block3').css('backgroundColor', 'grey');
            }
            else{
                $('#block1').css('backgroundColor', 'grey');
                $('#block2').css('backgroundColor', 'grey');
                $('#block3').css('backgroundColor', 'green');
            }
        }
        else if(judge_lack[i] === 1){
            // 表示缺页
            var $b1 = $('#block1');
            var $b2 = $('#block2');
            var $b3 = $('#block3');
            if(array_int[i] === 0)
            {
                $b1.css('backgroundColor', 'red');
                $b2.css('backgroundColor', 'grey');
                $b3.css('backgroundColor', 'grey');
                $b1[0].innerHTML = in_list[j];

            }
            else if(array_int[i] === 1){
                $b1.css('backgroundColor', 'grey');
                $b2.css('backgroundColor', 'red');
                $b2[0].innerHTML = in_list[j];
                $b3.css('backgroundColor', 'grey');
            }
            else {
                $b1.css('backgroundColor', 'grey');
                $b2.css('backgroundColor', 'grey');
                $b3.css('backgroundColor', 'red');
                $b3[0].innerHTML = in_list[j];
            }
            j++;
        }

        i++;
        if(i > array_int.length){
            clearInterval(f);
        }
    }
    function ff(){
        setInterval(f ,800);
    }

</script>
{% endblock %}
